<template>
    <div class="detail" v-if="info.id">
        <div class="form-card" v-if="info.type == 1">
            <div class="input-wrapper" v-if="info.is_subsidy != -1">
                <p class="label">加工费</p>
                <div class="input-box">
                    <van-radio-group
                        v-model="info.is_subsidy"
                        direction="horizontal"
                        icon-size="16px"
                        checked-color="#50b1c1"
                        disabled
                    >
                        <van-radio :name="1">是</van-radio>
                        <van-radio :name="0">否</van-radio>
                    </van-radio-group>
                </div>
            </div>
            <div class="input-wrapper" v-if="info.hospital">
                <p class="label">客户名称</p>
                <div class="input-box">
                    <!-- <p v-if="info.bill" class="input">{{ info.bill.hospital.title }}</p> -->
                    <p class="input">{{ info.hospital.title }}</p>
                </div>
            </div>
            <div class="input-wrapper" v-if="info.bill">
                <p class="label">账单编号</p>
                <div class="input-box">
                    <p class="input">{{ info.bill.order_sn }}</p>
                </div>
            </div>
            <div class="input-wrapper">
                <p class="label">入账账户</p>
                <div class="input-box">
                    <p class="input">{{ info.account.title }}</p>
                </div>
            </div>
            <div class="input-wrapper" v-if="info.finance">
                <p class="label">入账类别</p>
                <div class="input-box">
                    <p class="input">{{ info.finance.title }}</p>
                </div>
            </div>
            <div class="input-wrapper">
                <p class="label">入账时间</p>
                <div class="input-box">
                    <p class="input">{{ info.bill_time }}</p>
                </div>
            </div>
            <div class="input-wrapper">
                <p class="label">入账金额</p>
                <div class="input-box">
                    <p class="input">{{ info.amount }}</p>
                </div>
            </div>
            <div class="input-wrapper">
                <p class="label">订单差价</p>
                <div class="input-box">
                    <p class="input">{{ info.diff_amount }}</p>
                </div>
            </div>
            <div class="input-wrapper">
                <p class="label">展期</p>
                <div class="input-box">
                    <p class="input">{{ info.period }}</p>
                </div>
            </div>
        </div>
        <div class="form-card" v-else-if="info.type == 2">
            <div class="input-wrapper">
                <p class="label">填报账户</p>
                <div class="input-box">
                    <p class="input">{{ info.account.title }}</p>
                </div>
            </div>
            <div class="input-wrapper">
                <p class="label">出账规划</p>
                <div class="input-box">
                    <van-radio-group
                        v-model="info.planning"
                        direction="horizontal"
                        icon-size="16px"
                        checked-color="#50b1c1"
                        disabled
                    >
                        <van-radio :name="2">规划内</van-radio>
                        <van-radio :name="3">规划外</van-radio>
                    </van-radio-group>
                </div>
            </div>
            <div class="input-wrapper">
                <p class="label">出账类别</p>
                <div class="input-box">
                    <p class="input">{{ info.finance.title }}</p>
                </div>
            </div>
            <div class="input-wrapper">
                <p class="label">出账时间</p>
                <div class="input-box">
                    <p class="input">{{ info.bill_time }}</p>
                </div>
            </div>
            <div class="input-wrapper">
                <p class="label">出账金额</p>
                <div class="input-box">
                    <p class="input">{{ info.amount }}</p>
                </div>
            </div>
            <div class="input-wrapper">
                <p class="label">付款状态</p>
                <div class="input-box">
                    <p class="input">{{ getState(info.type2_status) }}</p>
                </div>
            </div>
            <div class="input-wrapper">
                <p class="label">付款对象</p>
                <div class="input-box">
                    <p class="input">{{ info.type2_object }}</p>
                </div>
            </div>
        </div>

        <div class="input-wrapper" v-if="info.remark">
            <p class="label">详细事项</p>
            <div class="input-box">
                <textarea v-model="info.remark" class="textarea" readonly></textarea>
            </div>
        </div>

        <div class="upload-wrapper" v-if="imgList.length > 0">
            <p class="label">上传凭证</p>
            <div class="upload-box">
                <div class="img-box" v-for="(item, index) in imgList" :key="index" @click="showImg(index)">
                    <img :src="item" alt="" class="img" />
                </div>
            </div>
        </div>
        <div class="step-wrapper">
            <p class="label">流程</p>
            <div class="step-box">
                <van-steps direction="vertical" :active="active" active-color="#50b1c1">
                    <van-step v-for="(item, index) in stepList" :key="index">
                        <div :class="{ activeColor: active >= index }">
                            <h3 v-if="index == 0">发起人</h3>
                            <h3 v-else>审批人</h3>
                            <p>
                                {{ item.user.nickname }} <span v-if="item.is_verify == 1">(已同意)</span>
                                <span v-if="item.is_verify == 2">(已驳回)</span>
                                <span v-if="item.verifytime">{{ getTime(item.verifytime) }}</span>
                            </p>
                            <p>{{ item.verify_msg }}</p>
                        </div>
                    </van-step>
                </van-steps>
            </div>
        </div>
        <div
            class="submit-group"
            v-if="
                (info.is_verify === 0 || info.is_verify === 1) &&
                    info.next_approval_id == myId &&
                    !$route.query.isSubmit
            "
        >
            <div class="btn" @click="show = true">驳回</div>
            <div class="btn" @click="handleVerify(1)">通过</div>
        </div>
        <div class="submit-group" v-if="(info.is_verify === 3 || info.is_verify === -1) && $route.query.isSubmit">
            <div class="btn-agin" @click="handleAginSubmit">重新提交</div>
        </div>
        <div class="submit-group" v-if="[0, 1].includes(info.is_verify) && $route.query.isSubmit">
            <div class="btn-agin" @click="handleWithdraw">撤回</div>
        </div>

        <van-popup v-model="show" closeable round position="bottom" :style="{ height: '190px' }">
            <div class="popup-box">
                <textarea class="text" v-model="verifyMessage" placeholder="请输入驳回理由（必填）"></textarea>
                <div class="btn" @click="handleVerify(2)">确定驳回</div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import moment from "moment";
import { ImagePreview, Toast } from "vant";
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            info: {},
            imgList: [],
            active: 0,
            stepList: [],
            verifyMessage: "",
            loading: false,
            show: false,
            myId: "",
        };
    },
    mounted() {
        this.onLoad();
    },
    computed: {
        ...mapGetters(["searchForm"]),
    },
    methods: {
        onLoad() {
            this.info = {};
            this.imgList = [];
            this.active = 0;
            this.stepList = [];
            this.verifyMessage = "";
            this.getBillItemInfo();
            this.myId = this.$cookies.get("_user_finance");
        },
        showImg(index) {
            ImagePreview({ images: this.imgList, startPosition: index, closeable: true });
        },
        getBillItemInfo() {
            this.$api.bill_item_info({ bill_item_id: this.$route.query.id }).then((res) => {
                if (res.code == 1) {
                    this.info = res.data;
                    this.$store.commit("SET_DETAILPARAMS", res.data);
                    if (res.data.images) {
                        this.imgList = res.data.images.split(",");
                    }
                    this.stepList.push({ user: res.data.user });
                    this.stepList.push(...res.data.approvals);
                    let index = res.data.approvals.findIndex((item) => item.is_verify == 0);
                    if (index == -1) {
                        this.active = res.data.approvals.length;
                    } else {
                        this.active = index;
                    }
                }
            });
        },
        getTime(time) {
            return moment(time * 1000).format("YYYY/MM/DD HH:mm");
        },
        handleWithdraw() {
            if (this.loading) return;
            this.loading = true;
            this.$api
                .revoke_bill({
                    bill_item_id: this.info.id,
                })
                .then((res) => {
                    if (this.$route.query.isSubmit) this.$bus.$emit("submitList");
                    this.loading = false;
                    this.show = false;
                    Toast(res.msg);
                    this.onLoad();
                })
                .catch((e) => {
                    this.loading = false;
                });
        },
        handleVerify(verify) {
            if (this.loading) return;
            if (verify == 2 && !this.verifyMessage) return Toast("请先填写驳回理由");
            this.loading = true;
            this.$api
                .verify_bill({
                    bill_item_id: this.info.id,
                    is_verify: verify,
                    verify_msg: this.verifyMessage,
                })
                .then((res) => {
                    if (!this.$route.query.isSubmit) this.$bus.$emit("approvalList:search", { ...this.searchForm });
                    this.loading = false;
                    this.show = false;
                    Toast(res.msg);
                    this.onLoad();
                })
                .catch((e) => {
                    this.loading = false;
                });
        },
        getState(state) {
            switch (state) {
                case "1":
                    return "待付";
                case "2":
                    return "已付";
                case "3":
                    return "加急";
                default:
                    return state;
            }
        },
        handleAginSubmit() {
            if (this.info.type == 1) {
                if (this.info.is_subsidy !== -1) {
                    // 入账
                    this.$router.push({
                        path: "/entry",
                        query: {
                            id: this.info.hospital_id ? this.info.hospital_id : "",
                            title: this.info.hospital ? this.info.hospital.title : "",
                            order: this.info.bill ? this.info.bill.order_sn : "",
                            info: JSON.stringify({
                                order_sn: this.info.bill?.order_sn || "",
                                is_subsidy: this.info.is_subsidy,
                                financesKey: this.info?.finance?.id,
                                time: this.info.bill_time,
                                amount: this.info.amount,
                                diff_amount: this.info.diff_amount,
                                remark: this.info?.remark,
                                imgList: this.info?.images,
                                accountsKey: this.info?.account_id,
                            }),
                        },
                    });
                } else {
                    // 预收款
                    this.$router.push({
                        path: "/addAdvance",
                        query: {
                            info: JSON.stringify({
                                searchKey: this.info.hospital_id ? this.info.hospital_id : "",
                                financesKey: this.info.finance_id,
                                time: this.info.bill_time,
                                amount: this.info.amount,
                                remark: this.info.remark,
                                accountsKey: this.info.account_id,
                                period: this.info.period,
                            }),
                        },
                    });
                }
            } else if (this.info.type == 2) {
                // 出账
                this.$router.push({
                    path: "/outgoing",
                    query: {
                        info: JSON.stringify({
                            accountsKey: this.info.account_id,
                            financesKey: this.info.finance_id,
                            time: this.info.bill_time,
                            amount: this.info.amount,
                            type2_status: this.info.type2_status,
                            remark: this.info.remark,
                            imgList: this.info.images,
                            type2_object: this.info.type2_object,
                        }),
                    },
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.detail {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    padding-top: 0.37rem;
    padding-bottom: 70px;
    background: linear-gradient(to bottom, #c4e1e6, #f6f6f6, #f6f6f6);

    .popup-box {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding-top: 40px;

        .text {
            width: 80%;
            height: 60px;
            border: 1px solid #ccc;
            resize: none;
            border-radius: 5px;
            margin-bottom: 15px;
            padding: 5px;
        }

        .btn {
            height: 36px;
            line-height: 36px;
            width: 80%;
            text-align: center;
            color: #fff;
            background-color: #50b1c1;
            border-radius: 5px;
        }
    }

    .activeColor {
        color: #50b1c1;
    }

    .form-card {
        width: 9.2rem;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 0.24rem;

        .input-wrapper {
            padding: 0.77rem 0.4rem 0.27rem;
            border-bottom: 1px solid #eee;
            margin-bottom: 0;

            .label {
                margin-bottom: 0.32rem;
                font-size: 15px;
                color: #000;
            }

            .input-box {
                display: flex;
                align-items: center;

                .input {
                    font-size: 12px;
                    line-height: 22px;
                    flex: 1;
                    padding-right: 0.21rem;
                }

                .van-icon {
                    color: #999999;
                }
            }
        }
    }

    .input-wrapper {
        padding: 0.77rem 0.4rem 0.27rem;
        background-color: #fff;
        width: 9.2rem;
        margin: 0 auto 0.48rem;
        border-radius: 8px;

        .label {
            margin-bottom: 0.32rem;
            font-size: 15px;
            color: #000;
        }

        .input-box {
            display: flex;
            align-items: center;

            .textarea {
                font-size: 12px;
                line-height: 20px;
                height: 66px;
                flex: 1;
                padding-right: 0.21rem;
                border: none;
                resize: none;
            }
        }
    }

    .upload-wrapper {
        width: 9.2rem;
        margin: 0 auto 0.53rem;
        display: grid;
        grid-gap: 10px;

        .label {
            font-size: 15px;
            color: #000;
        }

        .tips {
            font-size: 12px;
            color: #d90013;
        }

        .upload-box {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;

            .img-box {
                position: relative;
                width: 112px;
                height: 112px;
                border-radius: 10px;

                .img {
                    width: 100%;
                    height: 100%;
                    border-radius: 10px;
                    object-fit: cover;
                }

                .close {
                    display: block;
                    width: 0.48rem;
                    height: 0.48rem;
                    position: absolute;
                    top: 5px;
                    right: 5px;
                }
            }

            .upload-btn {
                display: block;
                width: 100%;
                height: 100%;
            }
        }
    }

    .step-wrapper {
        width: 9.2rem;
        margin: 0 auto 0.8rem;
        background: #fff;
        border-radius: 4px;
        padding: 0.53rem 0.4rem;

        .label {
            margin-bottom: 0.32rem;
            font-size: 15px;
            color: #000;
        }

        .step-box {
            van-steps {
                van-step {
                    h3 {
                    }

                    p {
                    }
                }
            }
        }
    }

    .submit-group {
        width: 9.2rem;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;

        .btn {
            width: 4.43rem;
            height: 0.93rem;
            line-height: 0.93rem;
            text-align: center;
            color: #fff;
            font-size: 14px;
            background-color: #d12323;
            border-radius: 5px;

            &:nth-child(2n) {
                background-color: #50b1c1;
            }
        }

        .btn-agin {
            flex: 1;
            height: 0.93rem;
            line-height: 0.93rem;
            text-align: center;
            color: #fff;
            font-size: 14px;
            background-color: #50b1c1;
            border-radius: 5px;
        }
    }
}
</style>
